<template>
	<z-paging ref="paging" v-model="data" @query="queryList">
		<view v-for="(item,index) in data" :key="item._id" class="container flex-row" @click="note_item_click(item)"
			show-refresher-when-reload>
			<image src="@/static/biji/biji.png" mode="widthFix" class="pic"></image>
			<view class="info flex-column flex-1">
				<view class="type"> {{item.topic?.question_content}}</view>
				<view class="title"> {{item.content}}</view>
			</view>
			<view class="trash" @click.stop="trash_click(item)">
				<uni-icons type="trash" size="25"></uni-icons>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const paging = ref(null)
	const opendb_note = uniCloud.importObject('opendb-note', {
		customUI: true
	})

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = async (pageNo, pageSize) => {
		let res = await opendb_note.opendb_note_list(pageNo, pageSize)
		console.log('笔记列表', res);
		if (res.errCode != 0) {
			paging.value.complete(false)
			return
		}
		paging.value.complete(res.data)
	}

	const data = ref([])

	function note_item_click(params) {
		uni.navigateTo({
			url: '/pages_lianxi/linianzhenti/topic_single_practice?id=' + params.topic._id + '&type=2'
		})
	}

	function trash_click(params) {
		uni.showModal({
			title: '温馨提示',
			content: `是否删除“${params.content}"笔记？`,
			success: (res) => {
				if (res.confirm) {
					trash_trash_func(params)
				}
			}
		})
	}

	async function trash_trash_func(params) {
		let res = await opendb_note.opendb_note_delete(params._id)
		let flag = res.errCode == 0
		uni.showToast({
			title: flag ? '已删除' : res.errMsg,
			icon: flag ? 'success' : "fail"
		})
		if (flag) {
			paging.value.refresh()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}
</style>

<style lang="scss" scoped>
	.container {
		margin: 20rpx 20rpx 0;
		padding: 12rpx;
		background-color: $me-color-background;
		border-radius: 5rpx;
		align-items: center;

		.pic {
			width: 21rpx;
		}

		.info {
			margin-left: 12rpx;

			.type {
				font-size: 24rpx;
				color: $me-color-gray-3;
				@include maxLines(1)
			}

			.title {
				font-size: 28rpx;
				margin-top: 12rpx;
			}
		}

		.trash {
			padding: 5rpx;
			margin-left: 12rpx;
		}
	}
</style>